<template>
	<view class="payment-card box-padding">
		<view class="payment-card__adress">
			<view class="payment-card__grid">
				<view class="address-region">
					<EmpireTag v-if="defaultAddress" text="默认"></EmpireTag>
					<uni-icons v-else type="location" size="24"></uni-icons>
					<text>{{ region }}</text>
				</view>
				<text class="address-left">{{ obj.address }}</text>
				<text class="address-left">{{ name }}</text>
			</view>
			<uni-icons type="right" size="24" @click.stop="handleAddressChange"></uni-icons>
		</view>
		<text>*温馨提示：请您实名填写收件信息，否则将不予发货，谢谢配合！</text>
	</view>
</template>

<script setup>
import EmpireTag from '@/components/empire-tag.vue';
import { useDefaultAddress } from '@/common/hooks/useDefaultAddress.js';
import { computed, ref, shallowReadonly } from 'vue';

const obj = shallowReadonly({
	address: '街道门牌号小区楼栋房间号',
	checked: false,
	city: '三亚市',
	county: '潮阳区',
	name: '薛洋',
	province: '湖南省',
	telephone: '18228946475',
	uid: '3823F2F3-843d-963C-29cC-6Ce7DA75E8a8'
});
const { state: defaultAddress } = useDefaultAddress(obj.value);
const region = computed(() => `${obj.province}${obj.city}${obj.county}`);
const name = computed(() => `${obj.name} ${obj.telephone}`);
function handleAddressChange() {
	uni.navigateTo({
		url: '/pages/address/address'
	});
}
</script>

<style lang="scss" scoped>
.payment-card__adress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #e6e6e6;
	border-radius: 10rpx;
}
.address-region {
	display: flex;
	align-items: center;
}
.address-left {
	margin-left: 48rpx;
	@extend .address-region;
}
.payment-card__grid {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
}
</style>
